<template>
  <div style="min-height: 300px; background-color: #303539">
    <div class="bottom w-1200-container">
      <div class="text-center m-auto">
        <el-image class="web-icon" :src="websiteIcon"></el-image>
        <div class="font-bold leading-7">
          <p>江西省独角兽 | 瞪羚</p>
          <p>企业服务平台</p>
        </div>
      </div>
      <div class="col-span-6 m-auto">
        <!-- <div class="line-box">
          <a class="alink-white">关于我们</a>
          <a class="alink-white">关于独角兽</a>
          <a class="alink-white">关于瞪羚</a>
          <a class="alink-white"> 联系我们</a>
          <a class="alink-white">在线反馈</a>
        </div> -->

        <div class="link-line pt-8">
          <div class="font-bold mr-2">友情链接：</div>

          <div v-for="(item, index) in linkList" :key="item.name">
            <a :href="item.herf" target="_blank" class="alink-white">
              {{ item.name }}
            </a>
            <span v-if="index != linkList.length - 1" class="px-3">▪</span>
          </div>
        </div>

        <div class="line-box">
          <span>主办单位：江西省科学技术厅</span>
          <span>地址：南昌市省政府大院北二路53号</span>
          <!-- <span>运营商：江西技转云高新技术有限公司</span> -->
          <span>技术支持：0791-83880509</span>
        </div>
      </div>
      <div class="text-center">
        <el-image
          :src="codeIcon"
          class="code-icon"
        ></el-image>
        <div class="text-gray-200 font-bold pt-1">江西省科学技术厅</div>
        <div class="text-gray-200 font-bold pt-1">微信公众号</div>
      </div>
    </div>
    <div class="copy-right">
      <div class="w-1200-container text-white text-center">
        <span>©2016-2021 江西省独角兽瞪羚服务平台 赣ICP备12000995号-2</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Foot",
  data() {
    return {
      websiteIcon: require("@/assets/images/home/icon.png"),
      codeIcon: require("@/assets/images/home/code.png"),

      linkList: [
        {
          name: "科技部",
          herf: "http://www.most.gov.cn/index.html",
        },
        {
          name: "江西省人民政府",
          herf: "http://www.jiangxi.gov.cn/",
        },
        {
          name: "江西省技术厅",
          herf: "https://www.creditjx.gov.cn/",
        },
        {
          name: "信用江西",
          herf: "http://kjt.jiangxi.gov.cn/",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.bottom {
  height: 250px;
  @apply grid grid-cols-8  text-white py-8 overflow-hidden;

  .line-box,
  .link-line {
    @apply flex justify-start items-start mb-10;
  }

  .line-box {
    span,
    a {
      @apply inline-block;
    }

    span:not(:nth-child(1)) {
      @apply ml-6;
    }
    a:not(:nth-child(1)) {
      @apply ml-6;
    }
  }
  .link-line {
    a {
      @apply inline-block ml-0;

      // &::after {
      //   content: "·";
      //   @apply inline-block w-8 text-center;
      // }
    }
  }
}
.copy-right {
  height: 50px;
  line-height: 50px;
  background-color: #000;
}
.web-icon {
  width: 120px;
}
.code-icon {
  width: 135px;
  height: 135px;
}
</style>
